<template>
	<view>
		<cu-custom :isBack="true" :bgColor="'bg-'+theme">
			<block slot="backText"></block>
			<block slot="content"><text>{{title}}</text></block>
		</cu-custom>
		<view class="whole-box">
			<scroll-view scroll-x class="bg-white nav text-center">
				<view class="cu-item my-cu-item" v-for="(item,index) in listObj" :key="index" :class="index==TabCur?'cur text-'+theme:'text-black'"
				 @tap="tabSelect" :data-id="index">
					<view class="">{{item.title}}</view>
				
				</view>
			</scroll-view>
			<view class="list">
				
				<!-- 静态排版，对应82行 -->
				<!-- <view  class="list-item" >
					<view class="goods-item">
						<view class="goods-thumb">
							<image class="thumb" mode="aspectFill" src="@/static/logo.png"></image>
						</view>
						<view class="goods_info">
							<view class="status">开团成功</view>
							<view class="title-line"><text class="attr">自营速达</text><text class="title">进口青啤梨|核少无渣 口口是肉</text></view>
							<view class="price">价格：￥120</view>
							<view class="time">时间：2021-03-02 12:38:04开团成功</view>
							<view class="number">X1</view>
						</view>
					</view>
					<view class="list-title">开团详情</view>
					<view class="join-box">
						<view class="member-box">
							<image class="avatar" src="@/static/default-avatar.png"></image>
							<image class="prize" src="@/static/icon-prize.png"></image>
							<view class="num">1</text>
							</view>
						</view>
						<view class="member-box">
							<image class="avatar" src="@/static/default-avatar.png"></image>
							<image class="prize" src="@/static/icon-prize.png"></image>
							<view class="num">2</text>
							</view>
						</view>
					</view>
				</view> -->
				
				
				<scroll-view scroll-y :style="'height:'+scrollHeight+'px'" @scrolltolower="getMore">
					<block v-for="(item,index) in listObj" :key="index" v-if="index==TabCur">
						<view v-if="item.list != ''" v-for="(group_buy ,i) in item.list" :key="i">
							
							<view  class="list-item" v-if="item.type == -3">
								<view class="goods-item">
									<view class="goods-thumb">
										<image class="thumb" mode="aspectFill" :src="group_buy && group_buy.wholesaleProduct.product.picture"></image>
									</view>
									<view class="goods_info">
										
										<view>
											<view class="status">等待开团</view>
										</view>
											
										<view class="title-line"><text class="attr">自营速达</text><text class="title">{{group_buy && group_buy.wholesaleProduct.product.name}}</text></view>
										<view class="price">价格：￥{{group_buy && group_buy.wholesaleProduct.wholesale_price}}</view>
										<!-- <view class="time">时间：2021-03-02 12:38:04开团成功</view> -->
										<view class="number">X1</view>
									</view>
								</view>
								<!-- <view class="list-title">开团详情</view> -->
								<!-- <view class="join-box" v-if="group_buy.seven && group_buy.seven != [] && group_buy.wholesaleJoin.wait_for_type == 1">
									<block v-for="(it,i) in group_buy.seven" :key="i" >
										<view class="member-box" v-if="it.member && it.member.id > 0">
											<image class="avatar" :src="it.member.head_portrait"></image>
											<image class="prize" v-if="i == 0" src="@/static/icon-one.png"></image>
											<image class="prize" v-else src="@/static/icon-prize.png"></image>
											<view class="num">{{parseInt(i) + 1}}</text>
											</view>
										</view>
										<view class="member-box" v-else>
											<image class="avatar" src="@/static/icon-wh.png"></image>
											
											<image class="prize" src="@/static/icon-prize.png"></image>
											<view class="num">{{parseInt(i) + 1}}</text>
											</view>
										</view>
									</block>
								</view> -->
							</view>
							
							<!-- 正在开团 -->
							<view  class="list-item" v-if="item.type == -2">
								<view class="goods-item">
									<view class="goods-thumb">
										<image class="thumb" mode="aspectFill" :src="group_buy && group_buy.wholesaleProduct.product.picture"></image>
									</view>
									<view class="goods_info">
										<view v-if="group_buy.wholesaleJoin.wait_for_type == 1">
											<view class="status">正在开团</view>
										</view>
										<view v-else>
											<view class="status">等待开团</view>
										</view>
											
										<view class="title-line"><text class="attr">自营速达</text><text class="title">{{group_buy && group_buy.wholesaleProduct.product.name}}</text></view>
										<view class="price">价格：￥{{group_buy && group_buy.wholesaleProduct.wholesale_price}}</view>
										<!-- <view class="time">时间：2021-03-02 12:38:04开团成功</view> -->
										<view class="number">X1</view>
									</view>
								</view>
								<view class="list-title">开团详情</view>
								<view class="join-box" v-if="group_buy.seven && group_buy.seven != [] && group_buy.wholesaleJoin.wait_for_type == 1">
									<block v-for="(it,i) in group_buy.seven" :key="i" >
										<view class="member-box" v-if="it.member && it.member.id > 0">
											<image class="avatar" :src="it.member.head_portrait"></image>
											<image class="prize" v-if="i == 0" src="@/static/icon-one.png"></image>
											<image class="prize" v-else src="@/static/icon-prize.png"></image>
											<view class="num">{{parseInt(i) + 1}}</text>
											</view>
										</view>
										<view class="member-box" v-else>
											<image class="avatar" src="@/static/icon-wh.png"></image>
											
											<image class="prize" src="@/static/icon-prize.png"></image>
											<view class="num">{{parseInt(i) + 1}}</text>
											</view>
										</view>
									</block>
								</view>
							</view>
							
							<!-- 开团成功-->
							<view  class="list-item" v-if="item.type == -1" >
								<view class="goods-item">
									<view class="goods-thumb">
										<image class="thumb" mode="aspectFill" :src="group_buy && group_buy.wholesaleProduct.product.picture"></image>
									</view>
									<view class="goods_info">
										<view class="status">开团成功</view>
										<view class="title-line"><text class="attr">自营速达</text><text class="title">{{group_buy && group_buy.wholesaleProduct.product.name}}</text></view>
										<view class="price">价格：￥{{group_buy && group_buy.wholesaleProduct.wholesale_price}}</view>
										
										<view class="time">时间：{{$common.timeFormat(group_buy.wholesaleJoin.completed_at,'YYYY-MM-DD')}}开团成功</view>
										<view class="number">X1</view>
									</view>
								</view>
								<view class="list-title">开团详情</view>
								<view class="join-box" v-if="group_buy.seven && group_buy.seven != []">
									<block v-for="(it,i) in group_buy.seven" :key="i" >
										<view class="member-box" v-if="it.member && it.member.id > 0">
											<image class="avatar" :src="it.member.head_portrait"></image>
											<image class="prize" v-if="i == 0" src="@/static/icon-one.png"></image>
											<image class="prize" v-else src="@/static/icon-prize.png"></image>
											<view class="num">{{parseInt(i) + 1}}</text>
											</view>
										</view>
										
										<view class="member-box" v-else>
											<image class="avatar" src="@/static/icon-wh.png"></image>
											
											<image class="prize" src="@/static/icon-prize.png"></image>
											<view class="num">{{parseInt(i) + 1}}</text>
											</view>
										</view>
									</block>
								</view>
							</view>
							
							<view class="group_buy" v-if="item.type == 1" @tap="goPage('/pages/member/wholesale/detail?id='+group_buy.wholesale.id)">
								<image class="thumb" mode="aspectFill" :src="group_buy.wholesale.product.picture"></image>
								<view class="info-box">
									<view class="stander-line title">{{group_buy.wholesale.product.name}}</view>
									<view class="stander-line spec-num">
										
										<text v-if="group_buy.wholesaleJoin && group_buy.wholesaleJoin.sku" class="spec">属性：{{group_buy.wholesaleJoin.sku.name ? group_buy.wholesaleJoin.sku.name : '默认'}}</text>
										<text v-else class="spec">属性：默认</text>
										<text class="num">x 1</text>
									</view>
									<view class="stander-line price">价格：
									<!-- ：{{ -->
									<!-- 	group_buy.wholesale.wholesaleProduct && 
										group_buy.wholesale.product && 
										group_buy.wholesale.wholesaleProduct.type == 0 && 
										group_buy.wholesale.product.wholesale_price > 0 &&
										group_buy.wholesale.wholesaleProduct.wholesale_price > 0
										? group_buy.wholesale.product.wholesale_price:group_buy.wholesale.wholesaleProduct.wholesale_price}} -->
										
										{{group_buy.wholesale.product.wholesale_price}}</view>
									<view class="stander-line time" v-if="group_buy.state == 2">
									
										<view class="stander-line time" v-if="group_buy.is_win == 1" style="color: red;">	拼中时间：{{$common.timeFormat(group_buy.created_at)}}  已拼中 </view>
										<view class="stander-line time" v-else >未拼中 {{$common.timeFormat(group_buy.created_at)}}</view>
										<view class="stander-line time" v-if="group_buy.pz > 0" style="color: red;">本产品已拼中{{group_buy.pz}}次</view>	
									</view>
									<view class="stander-line time" v-if="group_buy.state == 1">待开奖 </view>
									<view class="stander-line time" v-if="group_buy.state == 3">失败 </view>
									<!-- <view class="stander-line time">兑换时间：2020/12/31 15:15</view> -->
								</view>
							</view>
							<view v-if="item.type == 0" class="group_buy" style="height: 100px;" @tap="goPage('/pages/member/wholesale/detail?id='+group_buy.wholesale.id)">
								<image class="thumb" mode="aspectFill" :src="group_buy.wholesaleProduct && group_buy.wholesaleProduct.product ? group_buy.wholesaleProduct.product.picture : ''"></image>
								<view class="info-box">
									<view class="stander-line title">{{group_buy.wholesaleProduct && group_buy.wholesaleProduct.product ?  group_buy.wholesaleProduct.product.name : ''}}</view>
									
									<view class="stander-line price">价格：
									
										
										{{group_buy.wholesaleProduct && group_buy.wholesaleProduct.product ? group_buy.wholesaleProduct.product.wholesale_price : 0}}
									</view>
									<view class="stander-line time" v-if="group_buy.pz > 0" style="color: red;">本产品已拼中{{group_buy.pz}}次</view>	
								</view>
							</view>
						</view>
						<view class="cu-load margin-center" :class="item.loading?'loading':'over'"></view>
					</block>
				</scroll-view>
			</view>	
		</view>
		<Navbar ref="navbar" PageCur="category"></Navbar>
	</view>	
</template>

<script>
	import Navbar from '@/components/default/Navbar.vue'
	export default {
		components: {
			Navbar
		},
		mounted() {
			
		},
		data() {
			return {
				theme: this.$config.THEME(),
				title: '我的参团',
				TabCur: 0,
				listObj: [
					{
						title: '正在开团',
						title2: '待兑换',
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						type: -2
					},
					{
						title: '等待开团',
						title2: '待兑换',
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						type: -3
					},
					{
						title: '开团成功',
						title2: '待兑换',
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						type: -1
					},
					{
						title: '正在参团',
						title2: '待兑换',
						list: [
							{
								id: 1,
							},
							{
								id: 2,
							},
							{
								id: 3,
							},
						],
						hasMore: true,
						loading: false,
						page: 1,
						type: 0
					},
					{
						title: '参团成功',
						title2: '已兑换',
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						type: 1
					}
				],
				
				scrollHeight: 100,
			}
		},
		onLoad(options) {
			if (options.status)
				this.TabCur = parseInt(options.status)
				
				this.listObj[this.TabCur].list = []
				this.listObj[this.TabCur].hasMore = true
				this.listObj[this.TabCur].page = 1
				this.listObj[this.TabCur].loading = false
				this.getList(this.TabCur)
		},
		onShow() {
			if (this.$common.loginAuth(true)) {
				this.$nextTick((r) => {
					// uni.startPullDownRefresh({})
					
				})
			}
		},
		methods: {
			getScrollH() {
				let sys = uni.getSystemInfoSync();
				let winHeight = sys.screenHeight;
				//console.log(winHeight)
				let _this = this
				// 计算scroll-view高度
				let query = uni.createSelectorQuery().in(_this);
				query.select('.my-cu-item').boundingClientRect()
				query.selectViewport()
				query.exec(function(res) {
					//console.log(res)
					_this.scrollHeight = winHeight - res[0].bottom
				})
			},
			tabSelect(e) {
				this.getScrollH()
				if (this.TabCur != e.currentTarget.dataset.id) {
					this.TabCur = e.currentTarget.dataset.id
					this.listObj[this.TabCur].list = []
					this.listObj[this.TabCur].hasMore = true
					this.listObj[this.TabCur].page = 1
					this.listObj[this.TabCur].loading = false
					this.getList(this.TabCur)
				}
			},
			getList(index) {
				let obj = this.listObj[index]
				if (!obj.hasMore || obj.loading) return
			
				this.listObj[index].loading = true
				let params = {
					page: obj.page,
					type: obj.type,
				}
				this.$http
					.get('marketing_wholesale_log', params)
					.then((response) => {
						// console.log(response)
						let list = obj.list
						if (response.data.data.length > 0) {
							list = list.concat(response.data.data)
						} else {
							this.listObj[index].hasMore = false
						}
						
						this.listObj[index].list = list
						this.listObj[index].loading = false
						this.listObj[index].page++
						console.log(this.listObj[index].list)
						this.getScrollH()
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
					})
			},
			getMore() {
				this.getList(this.TabCur)
			},
		},
		onPullDownRefresh() {
			this.listObj[this.TabCur].list = []
			this.listObj[this.TabCur].hasMore = true
			this.listObj[this.TabCur].page = 1
			this.listObj[this.TabCur].loading = false
			this.getList(this.TabCur)
		},
	}
</script>

<style>
	.my-cu-item{
		height: 100rpx;
		display: inline-block;
		line-height: 50rpx;
		margin: 0 20rpx;
		padding: 30rpx 10rpx;
	}
	.group_buy{
		width: 100%;
		height: 240rpx;
		margin-top: 10rpx;
		padding: 30rpx 40rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.group_buy .thumb{
		width: 120rpx;
		height: 120rpx;
		border-radius: 6rpx;
		margin-right: 30rpx;
		flex-shrink: 0;
	}
	.group_buy .info-box{
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* align-items: center; */
	}
	.info-box .title{
		width: 520rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #000000;
		overflow: hidden;    
		text-overflow:ellipsis;    
		white-space: nowrap;
	}
	.info-box .spec-num{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.info-box .spec-num .spec{
		font-size: 24rpx;
		color: #000000;
	}
	.info-box .spec-num .num{
		font-size: 24rpx;
		color: #000000;
		opacity: 0.77;
	}
	.info-box .price{
		font-size: 24rpx;
		color: #000000;
	}
	.info-box .time{
		font-size: 24rpx;
		color: #5C5B5B;
	}
</style>

<style>
	.list-item{
		padding: 20rpx;
		background-color: #FFFFFF;
		margin: 10rpx 0;
	}
	.list-item .goods-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.goods-item .goods-thumb{
		width: 200rpx;
		height: 200rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
		position: relative;
	}
	.goods-thumb .thumb{
		width: 100%;
		height: 100%;
		border: 1rpx solid #DDDDDD;
		border-radius: 6rpx;
	}
	.goods-thumb .factory{
		position: absolute;
		top: 6rpx;
		left: 0;
		background-color: #FF0000;
		color: #ffffff;
		font-size: 24rpx;
		width: 120rpx;
		text-align: center;
		height: 30rpx;
		line-height: 30rpx;
		border-top-right-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
	}
	.goods-thumb .sold-out{
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 50%;
		background-color: rgba(0,0,0,0.5);
		color: #ffffff;
		font-size: 32rpx;
		position: absolute;
		top: 50rpx;
		left: 50rpx;
	}
	
	.goods-item .goods_info{
		flex: 1;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.goods_info .status{
		width: 110rpx;
		height: 40rpx;
		border: 2rpx solid #F32F2F;
		border-radius: 20rpx;
		text-align: center;
		line-height: 36rpx;
		font-size: 24rpx;
		color: #F33434;
	}
	.goods_info .title-line{
		/* margin-top: 20rpx; */
		display: flex;
		align-items: center;
	}
	.title-line .attr{
		flex-shrink: 0;
		/* padding: 4rpx 20rpx; */
		border-radius: 20rpx;
		background-color: #FFEE8B;
		color: #333333;
		font-size: 20rpx;
		height: 36rpx;
		width: 110rpx;
		text-align: center;
	}
	.title-line .title{
		margin-left: 4rpx;
		font-size: 28rpx;
		color: #000000;
		font-weight: bold;
	}
	.goods_info .price{
		font-size: 24rpx;
		color: #F32F2F;
	}
	.goods_info .time{
		font-size: 24rpx;
		color: #F32F2F;
	}
	.goods_info .number{
		text-align: right;
		font-size: 30rpx;
		color: #000000;
	}
		
	.list-item .list-title{
		margin-top: 30rpx;
		color: #000000;
		font-size: 30rpx;
	}
	.list-item .join-box{
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		flex-wrap: wrap;
	}
	.join-box .member-box{
		margin-top: 40rpx;
		width: 92rpx;
		height: 92rpx;
		margin-right: 10rpx;
		position: relative;
	}
	.join-box .member-box:nth-child(7n){
		margin-right: 0;
	}
	.member-box .avatar{
		width: 100%;
		height: 100%;
		border: 1rpx solid #DDDDDD;
		border-radius: 50%;
	}
	.member-box .prize{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: -8rpx;
		top: -20rpx;
	}
	.member-box .num{
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		transform: rotate(40deg);
		font-size: 24rpx;
		color: #FFFFFF;
		position: absolute;
		right: -8rpx;
		top: -20rpx;
	}
</style>
